<template>
<div class="page-login">
    <Header title="登录" rightContent="首页" to="/"></Header>
    <img class="logo" src="/public/img/login/logo.png" alt="">
    <mu-container>
        <mu-form :auto-validate="false" ref="form" :model="validateForm" class="mu-form">
            <div class="item">
                <mu-form-item label="手机号" icon="phone" :label-float="true" prop="phone" :rules="phoneRules">
                    <mu-text-field type="number" v-model="validateForm.phone" prop="phone"></mu-text-field>
                </mu-form-item>
            </div>
            <div class="item">
                <mu-form-item label="密码" icon="lock" :label-float="true" prop="password" :rules="passwordRules">
                    <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
                </mu-form-item>
            </div>
            <mu-form-item>
                <mu-button color="primary" @click="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</mu-button>
            </mu-form-item>
        </mu-form>
    </mu-container>
    <p class="btns">
        <router-link to="/register">注册</router-link>
        <router-link to="/findPassword">忘记密码?</router-link>
    </p>
</div>
</template>
<style lang="scss" scoped>
.page-login {
    text-align: center;
    .logo {
        width: 48%;
        margin-top: 3.5rem;
        margin-bottom: 1rem;
    }
    .mu-form {
        .item {
            display: flex;
            justify-content: center;
            img {
                width: 1.8rem;
                height: 1.8rem;
                margin-top: 3rem;
            }
            .mu-form-item {
                width: 20rem;
                margin-left: -10%;
            }
        }
        .is-float {
            display: none;
        }
        .mu-form-item-content {
            
            .mu-button {
                width: 22rem;
                margin: 2rem auto 0;
            }
        }
    }
    .btns {
        display: flex;
        justify-content: space-around;
        a {
            color: #2196F3;
        }
    }
}
</style>
<script>
// 引入组件
import Header from '@/components/Header';
// 组件
export default {
    // 注册组件
    components: { Header },
    // 数据
    data () {
        return {
            phoneRules: [
                { validate: (val) => !!val, message: '请输入手机号'},
                { validate: (val) => /^1[3456789]\d{9}$/.test(val), message: '手机号输入不正确'}
            ],
            passwordRules: [
                { validate: (val) => !!val, message: '请输入密码'},
                { validate: (val) => /^\w{4,8}$/.test(val), message: '密码长度为4-8位'}
            ],
            validateForm: {
                phone: '',
                password: ''
            }
        }
    },
    // 方法
    methods: {
        // 提交数据
        submit () {
            this.$refs.form.validate().then((result) => {
                if(result) {
                    // 发送异步消息，获取用户信息
                    this.$http
                        .post('/api/user/login', this.validateForm)
                        // 监听数据返回
                        .then(({ data }) => {
                            // console.log(data);
                            if (data.code === 0) {
                                // 将token和phone存储到本地
                                localStorage.setItem('token', data.token);
                                localStorage.setItem('phone', data.userinfo.phone);
                                // 提示信息
                                this.$toast.success(data.msg);
                                // 改变路由
                                this.$router.push('/');
                                // 显示加载标志
                                const loading = this.$loading();
                                setTimeout(() => {
                                    // 关闭加载中组件
                                    loading.close();
                                }, 1000)
                            } else {
                                // 提示登录失败
                                this.$toast.error(data.msg);
                            }
                        })
                }
            });
        }
    }
}
</script>